/**
 * 聊天消息组件
 */

import React from 'react';
import { Message } from '../types';
import DesignGallery from './DesignGallery';

interface ChatMessageProps {
  message: Message;
  onSelectDesign?: (design: any) => void;
}

const ChatMessage: React.FC<ChatMessageProps> = ({ message, onSelectDesign }) => {
  const isUser = message.type === 'user';
  const isDesign = message.type === 'design';

  return (
    <div
      style={{
        display: 'flex',
        gap: '12px',
        marginBottom: '16px',
        flexDirection: isUser ? 'row-reverse' : 'row',
      }}
    >
      {/* 头像 */}
      <div
        style={{
          width: '32px',
          height: '32px',
          borderRadius: '50%',
          flexShrink: 0,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: '18px',
          background: isUser ? '#e8e8e8' : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        }}
      >
        {isUser ? '👤' : '🤖'}
      </div>

      {/* 消息内容 */}
      <div
        style={{
          maxWidth: isDesign ? '100%' : '70%',
          display: 'flex',
          flexDirection: 'column',
          gap: '4px',
          alignItems: isUser ? 'flex-end' : 'flex-start',
          width: isDesign ? '100%' : 'auto',
        }}
      >
        {/* 消息气泡 */}
        {!isDesign && (
          <div
            style={{
              padding: '10px 14px',
              borderRadius: isUser ? '12px 12px 2px 12px' : '12px 12px 12px 2px',
              background: isUser ? '#667eea' : '#fff',
              color: isUser ? '#fff' : '#333',
              boxShadow: isUser ? 'none' : '0 2px 8px rgba(0, 0, 0, 0.08)',
              wordBreak: 'break-word',
              fontSize: '14px',
              lineHeight: '1.6',
            }}
          >
            {message.content}
          </div>
        )}

        {/* 设计方案展示 */}
        {isDesign && message.designs && message.designs.length > 0 && (
          <div style={{ width: '100%' }}>
            {/* 提示文字 */}
            <div
              style={{
                padding: '10px 14px',
                borderRadius: '12px 12px 12px 2px',
                background: '#fff',
                color: '#333',
                boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
                fontSize: '14px',
                lineHeight: '1.6',
                marginBottom: '8px',
              }}
            >
              {message.content}
            </div>

            {/* 设计方案画廊 */}
            <DesignGallery
              designs={message.designs}
              onSelect={(design) => {
                if (onSelectDesign) {
                  onSelectDesign(design);
                }
              }}
            />
          </div>
        )}

        {/* 时间戳 */}
        <div
          style={{
            fontSize: '12px',
            color: '#999',
            padding: '0 4px',
          }}
        >
          {message.timestamp.toLocaleTimeString('zh-CN', {
            hour: '2-digit',
            minute: '2-digit',
          })}
        </div>
      </div>
    </div>
  );
};

export default ChatMessage;
